<template>
  <div class="xd-LearningHome-LearningCommunity">
    <el-card shadow="hover" v-if="type===1">
      <div slot="header" class="clearfix">
        <span class="text_size_18 text_bold title">常见问题</span>
      </div>
      <div class="question">
        <p>1、登录问题</p>
        <p style="padding-left:30px;">本系统集成统一认证登录方式，教员输入统一认证登录名称和密码即可登录。学员输入学号和密码可登录本系统。</p>
        <p>2、课程学分问题</p>
        <p
          style="padding-left:30px;"
        >课程看完没有学分问题，课程未完成学习的情况下，会一直存在正在学习界面。课程可多次学习，达到系统要求的学时后状态变为已完成，从正在学习列表中消失。课程重复学习不计算学分。</p>
        <p>3、课程播放页面无法听到声音。这是由于您电脑声卡波形输出引起的故障，请您调整音频</p>
        <p style="padding-left:30px;">属性或修复声卡驱动程序，调整音频属性。</p>
        <p>4、浏览器兼容问题，本系统采用主流开发框架，支持IE11及以上版本IE浏览器、谷歌浏览</p>
        <p style="padding-left:30px;">器、360极速浏览器、360浏览器（需切换至极速模式）。</p>
      </div>
    </el-card>

    <el-card shadow="hover" v-if="type===2">
      <div slot="header" class="clearfix">
        <span class="text_size_18 text_bold title">建言献策</span>
      </div>
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="标题" prop="title">
          <el-input v-model="form.title"></el-input>
        </el-form-item>
        <el-form-item label="分类" prop="type">
          <el-select v-model="form.type" placeholder="请选择分类">
            <el-option
              v-for="item in feedbackTypeList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="内容">
          <el-input type="textarea" v-model="form.content"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="fetchFeedbackList">查看所有</el-button>
          <el-button type="primary" @click="onSubmit">添加留言</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <el-card shadow="hover" v-if="type===2">
      <div slot="header" class="clearfix">
        <span class="text_size_18 text_bold title">学员留言</span>
      </div>
      <MyComments :commentsInfo="feedbackList" :loading="loading"></MyComments>
      <el-pagination
        @size-change="feedbackSizeChange"
        @current-change="feedbackPageChange"
        :current-page="feedbackForm.page"
        :page-sizes="[10, 20, 30, 40, 50]"
        :page-size="feedbackForm.size"
        :layout="PAGE_LAYOUT"
        :total="feedbackForm.total"
      ></el-pagination>
    </el-card>

    <el-card class="survey-card" shadow="hover" v-if="type===3">
      <div slot="header" class="clearfix">
        <span class="text_size_18 text_bold title">网上调查</span>
      </div>
      <div
        v-for="(item, idx) in surveyList"
        :key="'survey' + idx"
        class="survey-cell"
        @click="goSurvey(item)"
      >
        <span class="survey-title">{{ item.questionnaireTitle }}</span>
        <span class="survey-time">{{ item.createTime }}</span>
      </div>
      <div class="content-footer">
        <el-pagination
          @size-change="surveySizeChange"
          @current-change="surveyPageChange"
          :current-page="surveyForm.page"
          :page-sizes="[10, 20, 30, 40, 50]"
          :page-size="surveyForm.size"
          :layout="PAGE_LAYOUT"
          :total="surveyForm.total"
        ></el-pagination>
      </div>
    </el-card>

    <el-card shadow="hover" v-if="type===4">
      <div slot="header" class="clearfix">
        <span class="text_size_18 text_bold title">操作指南</span>
         <el-button type="primary" id="btn" @click="handleExport">点击下载前台操作手册</el-button>
         <el-button type="primary" @click="handleDownlad">点击下载后台操作手册</el-button>
        <el-button type="primary" @click="handleDownladFront">点击下载前台操作视频</el-button>
        <el-button type="primary" @click="handleDownladBack">点击下载后台操作视频</el-button>
      </div>
      <!-- <pre v-html="operationGuide"></pre> -->
    </el-card>

    <el-card class="tool-card" shadow="hover" v-if="type===5">
      <div slot="header" class="clearfix">
        <span class="text_size_18 text_bold title">常用工具</span>
      </div>
      <template v-if="toolType === 0">
        <div class="tool-group">
          <el-row :gutter="10">
            <template v-for="(item, idx) in toolList">
              <el-col :span="6" :key="'tool' + idx">
                <div class="tool-cell" @click="chooseTool(item.id)">
                  <img class="tool-icon" :src="item.icon" />
                  <span class="tool-title">{{item.title}}</span>
                </div>
              </el-col>
            </template>
          </el-row>
        </div>
      </template>
      <template v-else-if="toolType === 1">
        <div class="dfjs">
          <div class="title">
            <img src="@/assets/imgs/dh.png" />
            <span style="margin-left:10px;">党费计算器</span>
          </div>
          <div class="form">
            <el-form ref="dfjsForm" :model="dfjsForm" label-width="160px" size="small">
              <el-form-item label="人员性质" prop="type">
                <el-select v-model="dfjsForm.type" placeholder="请选择" style="width:300px;">
                  <el-option
                    v-for="position in positionList"
                    :label="position.label"
                    :value="position.value"
                    :key="position.label"
                  ></el-option>
                  <!-- <el-option
                    label="士官"
                    :value="1"
                  ></el-option>
                  <el-option
                    label="文职人员"
                    :value="2"
                  ></el-option>
                  <el-option
                    label="离退休人员"
                    :value="3"
                  ></el-option>
                  <el-option
                    label="义务兵(含供给制人员)"
                    :value="4"
                  ></el-option>-->
                </el-select>
              </el-form-item>
              <template v-if="dfjsForm.type !== 4">
                <el-form-item
                  v-for="(item, idx) in positionList[dfjsForm.type].fieldList"
                  :label="item.label"
                  :key="'option' + idx"
                >
                  <el-input
                    placeholder="请输入工资"
                    type="number"
                    max="99999"
                    maxlength="5"
                    v-model="item.value"
                    style="width:300px;"
                    clearable
                  >
                    <template slot="append">元</template>
                  </el-input>
                </el-form-item>
              </template>
              <template v-else>
                <el-form-item label="每月交纳党费" prop="money">
                  <span class="df-text">0.5 元</span>
                </el-form-item>
              </template>

              <el-form-item v-if="dfjsForm.type !== 4">
                <el-button @click="clear">清空</el-button>
                <el-button type="primary" @click="dfjsOk">确定</el-button>
              </el-form-item>
            </el-form>
          </div>
          <div class="total">
            <p>
              您应当缴纳党费的基数为：
              <span class="money">{{dfjsForm.baseMoney}}</span>
            </p>
            <p>
              您应当缴纳党费的比例为：
              <span class="money">{{dfjsForm.ratioMoney}}%</span>
            </p>
            <p>
              您应当缴纳党费的金额为：
              <span class="money">{{dfjsForm.totalMoney}}元</span>
            </p>
          </div>
        </div>
        <div class="remark">
          <p style="font-size:16px;font-weight:bold;">计算方法说明：</p>
          <p>
            1、若人员类型为军官、文职干部；士官；文职人员；缴费基数为：相应缴费项求和。
            &lt;=3000缴费比例为0.5%;>3000&lt;=5000缴费比例为1.0%；>5000&lt;=10000缴费比例为1.5%；大于10000缴费比例为2%。
            缴费金额为缴费基数*缴费比例
          </p>
          <p>2、若为离退休人员缴费基数为相应缴费项求和，&lt;=5000缴费比例为0.5%;大于5000缴费比例为1.0%。缴费金额为缴费基数*缴费比例</p>
          <p>3、选择义务兵（含供给制学员），点击确定不进行计算。</p>
        </div>
      </template>
    </el-card>
  </div>
</template>
<script>
const MyComments = () => import('../../components/MyComments')

export default {
  name: 'LearningCommunity',
  components: {
    MyComments
  },
  data() {
    return {
      publicPath: process.env.BASE_URL,
      submitLoading: false,
      content: '',
      form: {
        title: '',
        type: '',
        content: ''
      },
      feedbackForm: {
        page: 1,
        size: 10,
        total: 0
      },
      loading: false,
      operationGuide: '',
      feedbackTypeList: [],
      feedbackList: [],
      showFeedbackList: false,
      toolList: [{
        id: 1,
        title: '党费计算器',
        icon: require('@/assets/imgs/icon_7.png')
      },
    //   {
    //     id: 2,
    //     title: '支部小秘书',
    //     icon: require('@/assets/imgs/icon_11.png')
    //   }
      ],
      toolType: 0,
      dfjsForm: {
        type: 0,
        // money: '',
        // money1: '',
        // money2: '',
        // money3: '',
        // money4: '',
        // money5: '',
        // money6: '',
        baseMoney: '0.00',
        ratioMoney: '0',
        totalMoney: '0.00'
      },
      positionList: [{
        label: '军官、文职干部',
        value: 0,
        fieldList: [{
          label: '职务工资',
          value: ''
        }, {
          label: '军衔（级别）工资',
          value: ''
        }, {
          label: '军龄工资',
          value: ''
        }, {
          label: '军人职业津贴',
          value: ''
        }, {
          label: '工作性津贴',
          value: ''
        }, {
          label: '地区津贴',
          value: ''
        }]
      }, {
        label: '士官',
        value: 1,
        fieldList: [{
          label: '军衔（级别）工资',
          value: ''
        }, {
          label: '军龄工资',
          value: ''
        }, {
          label: '军人职业津贴',
          value: ''
        }, {
          label: '工作性津贴',
          value: ''
        }, {
          label: '地区津贴',
          value: ''
        }]
      }, {
        label: '文职人员',
        value: 2,
        fieldList: [{
          label: '岗位工资',
          value: ''
        }, {
          label: '薪级工资',
          value: ''
        }, {
          label: '技术等级（职务）工资',
          value: ''
        }, {
          label: '绩效工资',
          value: ''
        }, {
          label: '地区津贴',
          value: ''
        }]
      }, {
        label: '离退休人员',
        value: 3,
        fieldList: [{
          label: '基本离退休费',
          value: ''
        }, {
          label: '军人职业津贴',
          value: ''
        }, {
          label: '地区津贴',
          value: ''
        }]
      }, {
        label: '义务兵（含供给制学员）',
        value: 4,
        fieldList: []
      }],

      surveyList: [],
      surveyForm: {
        page: 1,
        size: 10,
        total: 0
      }
    }
  },
  computed: {
    type() {
      return this.$store.state.learningCommunityType
    },
    noMore() {
      return this.commentList >= 20
    }
  },
  watch: {
    type(value) {
      // 左边栏切换时，重置下常用工具项。
      // TODO 重复点击左侧的话，不会重置。
      if (value === 5) {
        this.toolType = 1
      }else{
          this.toolType = 0
      }
    }
  },
  created() {
    this.fetchGuide()
    this.fetchFeedbackType()
    this.fetchFeedbackList()
    this.fetchSurveyList()
    // this.handleExport()
  },
  mounted() {
    this.$store.commit('updateActiveMenu', '/LearningHome/OnlineExams/LearningServices')
    var type = this.$route.query.type
    if (type) {
      this.$store.commit('switchLearningCommunityType', type)
    }
    if(this.type == 5){
        this.toolType = 1
    }
  },
  methods: {
    handleDownlad(){
      let a = document.createElement('a');
      a.href = `download/operationManual.docx`;
      a.download = '(无水印)政治工作信息平台后台用户操作用户手册—2020.3.doc';
      a.click();
    },
    handleDownladFront(){
      let a = document.createElement('a');
      a.href = `http://192.168.102.248:8099/xxpt/profile/frontOperation.mp4`;
      a.download = '前台操作视频.mp4';
      a.click();
    },
    handleDownladBack(){
      let a = document.createElement('a');
      a.href = `http://192.168.102.248:8099/xxpt/profile/backOperation.mp4`;
      a.download = '后台操作视频.mp4';
      a.click();
    },
    handleExport() {
      window.open('web/studyService/DownOperationsGuide')
    },
    onSubmit() {
      // 校验一下信息
      if (!this.form.title) {
        this.$message.error('请填写标题信息')
        return
      }
      if (this.form.type === '') {
        this.$message.error('请选择分类')
        return
      }
      if (!this.form.content) {
        this.$message.error('请填写具体内容')
        return
      }
      this.submitLoading = true
      utils.post('/studyService/feedbackAdd', this.form, res => {
        if (res.success) {
          this.$message({
            message: '添加成功',
            type: 'success'
          })
          this.$refs['form'].resetFields()
        }
        this.submitLoading = false
      })
    },
    showFeedback() {
      if (!this.showFeedbackList) {
        this.showFeedbackList = true
      }
    },
    fetchGuide() {
      utils.post('/studyService/operationsGuide', {}, res => {
        if (res.success) {
          this.operationGuide = res.data.noticeContent
        }
      })
    },
    fetchFeedbackType() {
      utils.post('/studyService/feedbackTypeList', {}, res => {
        if (res.success) {
          this.feedbackTypeList = res.data.map(element => {
            return {
              label: element.dictLabel,
              value: element.dictValue
            }
          })
        }
      })
    },
    fetchFeedbackList() {
      utils.post('studyService/feedbackList', {
        pageNumber: this.feedbackForm.page,
        pageSize: this.feedbackForm.size
      }, res => {
        if (res.success) {
          this.feedbackList = res.data.rows.map(item => {
            return Object.assign(item, {
              avatar: '',
              questionUserName: item.userName,
              questionContent: item.content
            })
          })
          this.feedbackForm.total = res.data.total
        }
      })
    },
    feedbackSizeChange(value) {
      this.feedbackForm.size = value
      this.fetchFeedbackList()
    },
    feedbackPageChange(value) {
      this.feedbackForm.page = value
      this.fetchFeedbackList()
    },
    dfjsOk() {
      if (this.dfjsForm.type !== 4) {
        let money = 0
        this.positionList[this.dfjsForm.type].fieldList.forEach(option => {
          money += parseFloat(+option.value, 10)
        })
        this.dfjsForm.baseMoney = money
        if (this.dfjsForm.type <= 2) {
          if (this.dfjsForm.baseMoney <= 3000) {
            this.dfjsForm.ratioMoney = 0.5
          } else if (this.dfjsForm.baseMoney <= 5000) {
            this.dfjsForm.ratioMoney = 1
          } else if (this.dfjsForm.baseMoney <= 10000) {
            this.dfjsForm.ratioMoney = 1.5
          } else {
            this.dfjsForm.ratioMoney = 2
          }
        } else if (this.dfjsForm.type === 3) {
          if (this.dfjsForm.baseMoney <= 5000) {
            this.dfjsForm.ratioMoney = 0.5
          } else {
            this.dfjsForm.ratioMoney = 1
          }
        }
        this.dfjsForm.totalMoney = (this.dfjsForm.baseMoney * (this.dfjsForm.ratioMoney / 100)).toFixed(2)
      } else {
        this.clear()
      }
    },
    clear() {
      this.$refs['dfjsForm'].resetFields()
    },
    fetchSurveyList() {
      utils.post('questionnaire/QuestionnaireList', {
        pageNumber: this.surveyForm.page,
        pageSize: this.surveyForm.size
      }, res => {
        if (res.success) {
          this.surveyList = res.data.rows
          this.surveyForm.total = res.data.total
        }
      })
      // for (var i = 0; i < 10; i++) {
      //   this.surveyList.push({
      //     id: i,
      //     title: '· 习近平出席2019年国际篮联篮球世界杯开幕式',
      //     create_time: '2019-09-09 9:00:00'
      //   })
      // }
    },
    goSurvey(item) {
      this.$router.push({
        path: '/LearningHome/OnlineExams/SurveyDetail',
        query: {
          tid: item.questionnaireId
        }
      })
    },
    surveySizeChange(value) {
      this.surveyForm.size = value
      this.fetchSurveyList()
    },
    surveyPageChange(value) {
      this.surveyForm.page = value
      this.fetchSurveyList()
    },
    chooseTool(value) {
      if (value === 1) {
        this.toolType = value
      } else {
        this.$notify.info('暂未发布，敬请期待！')
      }
    }
  }
}
</script>
<style lang="less">
.xd-LearningHome-LearningCommunity {
  .el-card {
    margin-top: 10px;
  }

  .tool-cell {
    display: flex;
    flex-direction: column;
    cursor: pointer;
    .tool-icon {
      width: 36px;
      height: 36px;
      padding: 10px;
    }
    .tool-title {
      font-size: 16px;
      font-weight: bold;
    }
  }

  .el-card__header {
    padding-left: 0px;
  }

  .clearfix {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    .title {
      border-left: solid 2px #cb2c21;
      padding-left: 12px;
    }
    #btn{
      margin-left: 15px;
    }
    .el-button--text {
      font-size: 16px;
      font-weight: normal;
      font-stretch: normal;
      line-height: 22.5px;
      letter-spacing: 0px;
      color: #666666;
    }
  }

  .dfjs {
    width: 532px;
    margin: 40px auto 50px auto;
    height: 712px;
    background-color: #d63434;
    border-radius: 10px;
    .title {
      height: 77px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-bottom: dashed 1px white;
      font-size: 24px;
      color: white;
    }

    .form {
      margin-top: 20px;
      border-bottom: dashed 1px white;
      padding-bottom: 30px;

      .el-form-item__label {
        color: white;
      }
      .el-input__inner {
        color: #333333;
      }

      .el-button {
        width: 145px;
        color: #f4ea2a;
        font-size: 14px;
      }
      .el-button--default {
        background: transparent;
        border: solid 1px #f4ea2a;
      }

      .el-button--primary {
        border: solid 1px #f4ea2a;
        background-color: #f4ea2a;
        color: #d63434;
      }
    }

    .total {
      padding: 36px 45px;

      p {
        font-size: 16px;
        color: white;
        margin: 9px 0px;
      }
      .money {
        color: #f4ea2a;
        font-weight: bold;
        font-size: 16px;
      }
    }
  }

  .remark {
    margin: 45px auto 0px auto;
    width: 522px;
    height: 257px;

    font-size: 14px;
    font-weight: normal;
    font-stretch: normal;
    line-height: 24px;
    letter-spacing: 0px;
    color: #333333;

    p {
      margin: 15px 0px;
    }
  }
  .survey-card {
    .el-card__body {
      padding: 0;
    }
    .survey-cell {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      padding: 17px 20px;
      border-bottom: 1px solid #dddddd;
      cursor: pointer;
      .survey-time {
        color: #999999;
      }
    }
    .content-footer {
      padding: 30px 64px;
    }
  }
  .df-text {
    color: #ffffff;
  }

  .question {
    font-size: 20px;
    padding-left: 20px;
    p {
      margin-bottom: 10px;
    }
  }
}
</style>
